<template>
  <a-spin size="large" :spinning="spinning" tip="加载中">
    <div>
      <a-affix :offset-top="top">
        <div class="top_navgation">
          <!-- 顶部导航栏 -->
          <div class="search">
            <a-row class="top_search">
              <a-col :span="12">
                <ul style="display: flex">
                  <li style="font-size: 11px; font-weight: 200">
                    <router-link to="/"
                      ><HomeOutlined
                        style="
                          margin-right: 5px;
                          padding-top: 4px;
                          color: coral;
                        "
                      />首页</router-link
                    >
                  </li>
                  <li
                    style="margin-left: 20px; font-size: 11px; font-weight: 200"
                  >
                    <router-link to="/register"
                      ><SendOutlined
                        style="
                          margin-right: 5px;
                          padding-top: 4px;
                          color: coral;
                        "
                      />免费注册</router-link
                    >
                  </li>
                </ul>
              </a-col>
              <a-col :span="12">
                <ul style="display: flex">
                  <li
                    style="margin-left: 20px; font-size: 11px; font-weight: 200"
                  >
                    <router-link @click="toCart" to="/cart"
                      ><ShoppingCartOutlined
                        style="
                          margin-right: 5px;
                          padding-top: 4px;
                          color: coral;
                        "
                      />购物车</router-link
                    >
                  </li>
                  <li
                    style="margin-left: 20px; font-size: 11px; font-weight: 200"
                  >
                    <a-dropdown>
                      <router-link to="/collectgoods"
                        ><StarOutlined
                          style="
                            margin-right: 5px;
                            padding-top: 4px;
                            color: coral;
                          "
                        />收藏夹 <DownOutlined style="color: coral" />
                      </router-link>
                      <template #overlay>
                        <a-menu>
                          <a-menu-item>
                            <router-link
                              style="font-size: 10px"
                              to="/collectgoods"
                              >收藏的宝贝</router-link
                            >
                          </a-menu-item>
                          <a-menu-item>
                            <router-link
                              style="font-size: 10px"
                              to="/collectstores"
                              >收藏的店铺</router-link
                            >
                          </a-menu-item>
                        </a-menu>
                      </template>
                    </a-dropdown>
                  </li>
                  <li
                    @click="toPersonal"
                    style="margin-left: 20px; font-size: 11px; font-weight: 200"
                  >
                    <router-link to="/personal"
                      ><DesktopOutlined
                        style="
                          margin-right: 5px;
                          padding-top: 4px;
                          color: coral;
                        "
                      />个人中心</router-link
                    >
                  </li>
                </ul>
              </a-col>
            </a-row>
          </div>
        </div>
      </a-affix>

      <!-- 商品区 -->
      <div
        style="
          background-color: #f2f6fc;
          padding-left: 150px;
          padding-right: 150px;
          padding-top: 20px;
          padding-bottom: 20px;
        "
      >
        <div>
          <a-card :bordered="false" style="height: auto">
            <a-row>
              <a-col :span="12">
                <div>
                  <a-image
                    :preview="false"
                    width="100%"
                    height="370px"
                    :src="goods.image"
                    style="object-fit: cover; border-radius: 20px"
                  />
                </div>
              </a-col>
              <a-col :span="12">
                <div style="padding: 0px 0px 0px 50px">
                  <a-space :size="18" direction="vertical">
                    <div>
                      <h1 class="ItemHeader">
                        {{ goods.name }}
                      </h1>
                      <div>
                        <span>销量：</span>
                        <span
                          style="
                            font-size: 14px;
                            line-height: 28px;
                            vertical-align: baseline;
                            color: #838282;
                            text-align: center;
                          "
                          >{{ goods.sale }}</span
                        >
                      </div>
                    </div>
                    <div>
                      <span
                        style="
                          font-size: 18px;
                          line-height: 28px;
                          vertical-align: baseline;
                          color: red;
                        "
                        >疯抢价：</span
                      >
                      <PayCircleOutlined :style="icon_pay_style" />
                      <span
                        style="
                          font-size: 24px;
                          line-height: 28px;
                          vertical-align: baseline;
                          font-family: AlibabaSans102-Bold;
                          color: red;
                        "
                        >{{ goods.price }} / {{ goods.unit }}</span
                      >
                    </div>
                    <div>
                      <span> 商家：</span>
                      <router-link to="" @click="toStore(goods.storeId)">
                        <span
                          style="
                            font-size: 14px;
                            line-height: 28px;
                            vertical-align: baseline;
                            font-family: AlibabaSans102-Bold;
                          "
                          >{{ goods.homeName }}</span
                        >
                      </router-link>
                    </div>
                    <div>
                      <span>品牌：</span>
                      <span
                        style="
                          font-size: 14px;
                          line-height: 28px;
                          vertical-align: baseline;
                          font-family: AlibabaSans102-Bold;
                        "
                        >{{ goods.brand }}</span
                      >
                    </div>
                    <div>
                      <span>分类：</span>
                      <router-link to="" @click="toCategory(goods.category)">
                        <span
                          style="
                            font-size: 14px;
                            line-height: 28px;
                            vertical-align: baseline;
                            font-family: AlibabaSans102-Bold;
                          "
                          >{{ goods.category }}</span
                        >
                      </router-link>
                    </div>
                    <div>
                      <span>数量：</span>
                      <a-input-number
                        min="0"
                        defaultValue="0"
                        v-model:value="goodsNum"
                        style="margin-left: 20px"
                        step="1"
                        :max="goods.number"
                      >
                      </a-input-number>
                      <span
                        style="
                          font-size: 12px;
                          line-height: 28px;
                          vertical-align: baseline;
                          margin-left: 10px;
                          color: #838282;
                          text-align: center;
                        "
                        >有货</span
                      >
                    </div>
                    <div>
                      <div
                        style="
                          margin-bottom: 10px;
                          border-radius: 50px;
                          height: 48px;
                          width: 288px;
                          background-color: #929191;
                        "
                      >
                        <button
                          style="
                            background: linear-gradient(
                              90deg,
                              rgb(255, 119, 0),
                              rgb(255, 73, 0)
                            );
                            border: none;
                            height: 48px;
                            width: 144px;
                            border-radius: 50px 0px 0px 50px;
                            color: #fff;
                            font-weight: bold;
                            font-size: 16px;
                          "
                          @click="buyNow"
                        >
                          立即购买
                        </button>
                        <button
                          style="
                            background: linear-gradient(
                              90deg,
                              rgb(255, 203, 0),
                              rgb(255, 148, 2)
                            );
                            border: none;
                            height: 48px;
                            width: 144px;
                            border-radius: 0px 50px 50px 0px;
                            color: #fff;
                            font-weight: bold;
                            font-size: 16px;
                          "
                          @click="addToCart"
                        >
                          加入购物车
                        </button>
                      </div>
                    </div>
                  </a-space>
                </div>
              </a-col>
            </a-row>

            <!-- 底部宝贝详情 -->
            <div style="margin-top: 80px">
              <a-tabs v-model:activeKey="activeKey">
                <a-tab-pane key="1" tab="宝贝详情">
                  <div>
                    <!-- <Editor
                      style="height: 500px; overflow-y: hidden"
                      v-model="goods.detail"
                      :defaultConfig="editorConfig"
                      :mode="mode"
                      @onCreated="handleCreated"
                    /> -->
                    <div v-html="goods.detail"></div>
                  </div>
                </a-tab-pane>
                <a-tab-pane key="2" tab="宝贝评价" force-render>
                  <a-comment v-for="(item, index) in commentDto" :key="index">
                    <template #author
                      ><a>{{ item.nickName }}</a></template
                    >
                    <template #avatar>
                      <a-avatar :src="item.avatar" alt="" />
                    </template>
                    <template #content>
                      <p>{{ item.comment }}</p>
                    </template>
                    <template #datetime>
                      <a-tooltip>
                        <span>{{ item.createTime }}</span>
                      </a-tooltip>
                    </template>
                  </a-comment>
                  <a-empty v-if="isEmpty" description="暂无评价" />
                </a-tab-pane>
              </a-tabs>
            </div>
          </a-card>
        </div>
      </div>

      <!-- 右侧的悬浮按钮 -->
      <div>
        <a-float-button-group
          :style="{ right: '100px' }"
        >
          <template #icon>
            <CustomerServiceOutlined />
          </template>
          <a-float-button @click="doCollect" tooltip="点击收藏">
            <template #icon>
              <HeartOutlined style="color: #ff8c00"/>
            </template>
          </a-float-button>
          <a-float-button @click="doneComment" tooltip="点击评价">
            <template #icon>
              <CommentOutlined style="color: #ff8c00"/>
            </template>
          </a-float-button>
          <a-float-button @click="toCart" tooltip="购物车">
            <template #icon>
              <ShoppingCartOutlined style="color: #ff8c00"/>
            </template>
          </a-float-button>
          <a-back-top description="顶部" :visibility-height="1000" />
        </a-float-button-group>
      </div>

      <!-- 评价弹框 -->
      <div>
        <a-modal
          v-model:open="modalVisible"
          centered
          cancelText="取消"
          okText="确认"
          @ok="saveComment"
          @cancel="handleCancel"
        >
          <a-form ref="formRef" :model="comments" :rules="rules">
            <a-form-item ref="comment" label="内容" name="comment">
              <a-textarea
                v-model:value="comments.comment"
                placeholder="评价内容"
                :rows="4"
              />
            </a-form-item>
            <a-form-item label="评分" ref="score" name="score">
              <a-rate v-model:value="comments.score" allow-half />
            </a-form-item>
          </a-form>
        </a-modal>
      </div>
    </div>
  </a-spin>
</template>

<script setup>
import { onMounted, ref } from "vue";
import {
  PayCircleOutlined,
  CommentOutlined,
  CustomerServiceOutlined,
  HeartOutlined,
  ShoppingCartOutlined,
  StarOutlined,
  DownOutlined,
  DesktopOutlined,
  SendOutlined,
  HomeOutlined,
} from "@ant-design/icons-vue";
import { message } from "ant-design-vue";
import { useRoute } from "vue-router";
import { getGoodsDetail } from "@/api/goods";
import { saveComments, getComment } from "@/api/comment";
import { useUserStore } from "@/stores/user";
import { useAuthorizationStore } from "@/stores/authorization";
import { addCart } from "@/api/cart";
import router from "@/router";
import { saveCollectGoods } from "@/api/collectgoods";

const images = ref([]);
const goodsNum = ref(1);
const activeKey = ref("1");
const route = useRoute();
const goods = ref({});
let id = route.query.id;
const spinning = ref(true);
onMounted(() => {
  setTimeout(() => {
    getGoodsDetails();
    getComments();
    spinning.value = false;
  }, 1500);
});
//获取商品详情
function getGoodsDetails() {
  getGoodsDetail(id).then((res) => {
    if (res.code === 200) {
      goods.value = res.data;
      const imageOne = goods.value.imageOne;
      const imageTwo = goods.value.imageTwo;
      const imageThree = goods.value.imageThree;
      const imageFour = goods.value.imageFour;
      const imageUrls = [imageOne, imageTwo, imageThree, imageFour];
      images.value = imageUrls;
    }
  });
}

//获取商品评价
const commentDto = ref([]);
const isEmpty = ref(false);
function getComments() {
  getComment(id).then((res) => {
    if (res.code === 200 && res.data !== null) {
      commentDto.value = res.data;
    }
    if (res.data === null) {
      isEmpty.value = true;
    }
  });
}

//加入购物车
const cart = {
  userId: null,
  goodsId: null,
  number: null,
};
//结算跳往提交订单页
// 立即购买
function buyNow() {
  if (userStore.user.key) {
    cart.userId = userStore.user.key;
    cart.goodsId = goods.value.key;
    cart.number = goodsNum.value;
    //获取购物车ids
    addCart(cart).then((res) => {
      if (res.code === 200) {
        message.success("请选择要购买的宝贝！");
        router.push("/cart");
      }
    });
  } else {
    message.warning("请先登录哦！");
    router.push("/login");
  }
}

function addToCart() {
  if (userStore.user.key) {
    cart.userId = userStore.user.key;
    cart.goodsId = goods.value.key;
    cart.number = goodsNum.value;
    addCart(cart).then((res) => {
      if (res.code === 200) {
        message.success("成功加入购物车！");
      }
    });
  } else {
    message.warning("请先登录哦！");
    router.push("/login");
  }
}

//收藏
const collecGoods = ref({
  userId: null,
  goodsId: null,
});
function doCollect() {
  if (userStore.user.key) {
    collecGoods.value.userId = userStore.user.key;
    collecGoods.value.goodsId = goods.value.key;
    saveCollectGoods(collecGoods.value).then((res) => {
      if (res.code === 200) {
        message.success("收藏成功！");
      }
    });
  } else {
    message.warning("请先登录哦！");
    router.push("/login");
  }
}
const modalVisible = ref(false);
const comments = ref({
  comment: "",
  score: null,
  userId: null,
  goodsId: null,
});
//评价
function doneComment() {
  if (authorizationStore.authorization) {
    modalVisible.value = true;
  } else {
    message.warning("请先登录哦！");
    router.push("/login");
  }
}
//评价保存
const userStore = useUserStore();
function saveComment() {
  formRef.value
    .validate()
    .then(() => {
      comments.value.userId = userStore.user.key;
      comments.value.goodsId = goods.value.key;
      saveComments(comments.value).then((res) => {
        if (res.code === 200) {
          message.success("评价成功！");
          modalVisible.value = false;
          comments.value = {};
          getComments();
        }
      });
    })
    .catch((error) => {
      console.log("error", error);
    });
}

//取消评价
function handleCancel() {
  modalVisible.value = false;
  comments.value = {};
}

const formRef = ref();
const rules = {
  comment: [
    {
      required: true,
      message: "请输入评价内容",
      trigger: "change",
    },
  ],
  score: [
    {
      required: true,
      message: "请选择评分",
      trigger: "change",
    },
  ],
};

//跳往购物车
const authorizationStore = useAuthorizationStore();
function toCart() {
  if (authorizationStore.authorization) {
    router.push("/cart");
  } else {
    router.push("/login");
  }
}

//跳往商铺页
function toStore(id) {
  router.push({ name: "Shop", query: { id: id } });
}

//跳往用户点击的分类页
function toCategory(name) {
  router.push({ name: "Category", query: { name: name } });
}

const icon_pay_style = {
  fontSize: "20px",
  color: "#ff5000",
  marginRight: "5px",
};
</script>

<style scoped>
.ItemHeader {
  line-height: 28px;
  color: #000;
  letter-spacing: 0;
  font-size: 20px;
  font-family: PingFang SC;
  font-weight: 900;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
a:hover {
  color: red;
}
.top_navgation {
  background-color: #fff;
  color: #303133;
}
.search {
  height: 30px;
  background-color: #f4f4f5;
}
.top_search {
  height: 30px;
  margin-left: 150px;
  margin-right: 150px;
  width: 80%;
  padding-top: 3px;
}
.top_serach {
  height: 100px;
  background-color: #fff;
}

ul {
  list-style-type: none;
}

:deep(.slick-slide) {
  height: 370px;
  background: #fff;
  overflow: hidden;
  border-radius: 10px;
}

:deep(.slick-list) {
  height: 370px;
  background: #fff;
  overflow: hidden;
  border-radius: 10px;
}
</style>
